<template>
	<view class="page">		 
		<view class="body">
			<!-- <view class="body-bg"><image src="@/static/images/u3.png" mode="widthFix"></image></view> -->
			
			<view class="top" :style="{'padding-top':menuButtonInfo.top+'px','height':menuButtonInfo.height+'px'}">
				<view class="tabs">
					<view class="left">
						<view class="picker-view" @click="showPopup('show','isShowlist')">
							<text class="text m-r1">{{currentGardenName}}</text><image class="icon" src="@/static/images/u4.png" mode="widthFix"></image>
						</view> 		
					</view>
				</view>
				
				<view class="right">
					<view class="msg">
						<image src="@/static/images/u2.png" mode="widthFix"></image>
						<view class="d"></view>
					</view>
					<view class="add">
						<image src="@/static/images/u1.png" mode="widthFix" @click="showadd=true"></image>
						<view v-if="showadd" class="add-btns a-fadeinR">
							<navigator url="/pages/add/add" hover-class="none" class="btn">添加设备</navigator>
							<navigator url="/pages/add/add" hover-class="none" class="btn">扫一扫</navigator>
							<view class="btn">批量控制</view>
							<view class="btn">自动化</view> 
						</view>
					</view>
				</view>
			</view>
			
			<view class="area-tab">
				<view class="left">
					<view class="m-r2" :class="{'active':currentAreaId==item.id}" v-for="(item,index) in arealist" :key="item.id" @click="changeArea(index)">{{item.name}}</view> 
				</view>
				<!-- <view class="right"><image src="@/static/images/u5.png" mode="widthFix"></image></view> -->
			</view>
			<!-- <view class="mode-btn">
				<image src="@/static/images/u7.png" mode="widthFix"></image>
				<image src="@/static/images/u6.png" mode="widthFix"></image>
			</view> -->
			
			<view class="video-area"></view>		
			
			<view class="data-area ">
				<template v-if="plantinglist.length>1" >
					<view class="item" v-for="(item,index) in plantinglist" :key="item.id">
						<view class="spot"></view>
						<view class="icon"></view>
						<view class="info">
							<view class="name">{{item.pot_name}}：{{item.plant_name}}</view>
							<view class="status-icon">
								<image v-if="true" src="@/static/images/jh.png" mode="widthFix"></image>
								<image v-else src="@/static/images/jh_active.png" mode="widthFix"></image>
							</view>
						</view>					
					</view> 
				</template>
				
				<template v-else>
					<view class="item-row-1" v-for="(item,index) in plantinglist" :key="item.id">
						<view class="spot"></view>
						<view class="icon"></view>
						<view class="info">
							<view class="name">花盆13：香菜</view>
							<view class="status-icon">
								<image v-if="true" src="@/static/images/jh.png" mode="widthFix"></image>
								<image v-else src="@/static/images/jh_active.png" mode="widthFix"></image>
							</view>
						</view>
						<view class="line-bar">
							<view class="line"></view>
							<view class="left circle"></view>
							<view class="right circle"></view>
						</view>
						<view class="item-detail-wrap">
							<view class="status">已浇水</view>
							<view class="time">更新时间：2024-12-24 13:00</view>
							<view class="attr-list">
								<view class="sub-item" style="width: 40%;">
									<image src="@/static/images/cy_1.png" mode="widthFix"></image>
									<text>花盆1：香菜</text>
								</view>
								<view class="sub-item" style="width: 60%;">
									<image src="@/static/images/cy_2.png" mode="widthFix"></image>
									<text>种植时间：2024-12-24</text>
								</view>
								<view class="sub-item" style="width: 40%;">
									<image src="@/static/images/cy_3.png" mode="widthFix"></image>
									<text>水份：适量</text>
								</view>
								<view class="sub-item" style="width: 60%;">
									<image src="@/static/images/cy_4.png" mode="widthFix"></image>
									<text>预计成熟时间：2024-12-24</text>
								</view>
								<view class="sub-item" style="width: 40%;">
									<image src="@/static/images/cy_5.png" mode="widthFix"></image>
									<text>累计培育：18天</text>
								</view>
								<view class="sub-item" style="width: 60%;">
									<image src="@/static/images/cy_6.png" mode="widthFix"></image>
									<text>水位：充足</text>
								</view>
								<view class="sub-item">
									<image src="@/static/images/cy_7.png" mode="widthFix"></image>
									<text>累计收获：3次</text>
								</view>
							</view>
						</view>
					</view> 
				</template>
			</view>
		</view>		
		<view v-if="flag.isFullPage" class="full-fix-page" @click="showPopup('hide')">	
			<view v-if="flag.isShowlist" class="cy-list" :style="{'top':(menuButtonInfo.top+menuButtonInfo.height+10)+'px'}">
				<view class="btn" v-for="(item,index) in list" :key="item.id" @click="changeGarden(index)"><text>{{item.name}}</text><text v-if="currentGardenName==item.name" class="iconfont f-s24" >&#xe605;</text></view>			 
				<navigator url="/pages/community-list/community-list?page=1" class="btn manage-btn"><text>菜园管理</text><text class="iconfont f-s40">&#xe60a;</text></navigator>
			</view> 	
		</view>
		<c-nav switchTab="1"></c-nav>
	</view>
</template>

<script> 
	import { 
		uploadImage, 
		uploadToServe, 
	} from '@/common/util.js'
	export default {
		data() {
			return {
				isLogin: false,
				userInfo: uni.getStorageSync('userInfo'),
				userAuth: {},
				showadd:false,
				menuButtonInfo:{},
				loadingState: {
					default: true
				},
				flag:{
					isFullPage:false,
					isShowlist:false, 
				},
				list:[],
				plantinglist:[],
				arealist:[],
				currentAreaId:0,
				currentGardenId:0,
				currentGardenName:'',
				keywords:'',
				crop_type:''
			}
		},
		async onLoad() {
			this.gardenindex();
		},
		async onShow() {
			 
		},
		mounted() {
			this.menuButtonInfo=uni.getMenuButtonBoundingClientRect(); 
		},
		methods: {			 
			// 获取列表
			gardenindex:async function(){
				let res=await this.$api.user_api.gardenindex();  
				if(res.data.code==0 && res.data.data.length>0){
					this.list=res.data.data;  
					this.currentGardenId=res.data.data[0].id;
					this.currentGardenName=res.data.data[0].name;
					this.areaindex(this.currentGardenId);
				} 
				 
			},
			
			changeGarden(idx){ 
				let item=this.list[idx];
				this.currentGardenId=this.list[idx].id;
				this.currentGardenName=this.list[idx].name;
				this.showPopup('hide');
				this.areaindex(this.currentGardenId);				
			},
			 
			areaindex:async function(id){
				let res=await this.$api.user_api.areaindex({
					garden_id:id
				});  
				if(res.data.code==0 && res.data.data.length>0){
					this.arealist=res.data.data;
					this.currentAreaId=res.data.data[0].id; 
					this.plantinglist=[];
					this.plantingindex();
				}   
			},
			
			changeArea(idx){
				let item=this.arealist[idx];
				if(this.currentAreaId==item.id) return;
				this.currentAreaId=item.id;
				this.plantinglist=[];
				this.plantingindex();
			},
			
			plantingindex:async function(id){
				let res=await this.$api.user_api.plantingindex({
					garden_id:this.currentGardenId,
					area_id:this.currentAreaId
				}); 
				console.log(res)
				if(res.data.code==0 && res.data.data.length>0){
					this.plantinglist = res.data.data; 
				}   
			},
			
			// 打开弹窗
			showPopup(t, n) { 
				if (t == 'show') { 
					this.flag.isFullPage = true;
					this.flag[n] = true;
				} else if (t == 'hide') {
					if(n){ 
						this.flag[n] = false;
					}else{
						for (let i in this.flag) {
							this.flag[i] = false;
						}
					}					
				}
			},
			
			
			search(){
				this.list=[]; 
				this.askindex();
			},
			
			clearKeyword(){
				this.list=[]; 
				this.keywords='';
				this.askindex();
			},
			
			checkPhoto:async function(){ 
				
				// 上传现场照片
				let _this = this;
				 
				uploadImage({
					length: 1,
					sourceType:['album'],
					maxSize: 1, 
					async success(res) {  
						console.log(res)
						// let params_data = {};
						// params_data.status = 0;
						// params_data.url = res.tempFilePaths[0];
						// _this.files.push(params_data); 
						// let token=await _this.$api.user_api.getToken({
						// 	appid:'100002',
						// 	appsecret:'24dcb652ce0043c9a53d90de2468b5b8'
						// }) 
						// uni.showLoading();
						// uploadToServe({
						// 	type:1,
						// 	url: 'https://shibie.honghuoyi.com/user/sb-insert.do',  
						// 	filePath: res.tempFilePaths[0],
						// 	name: 'myfile',
						// 	formData:{
						// 		appid:100002,
						// 		token:token.data.data.token,
						// 		uid:_this.userInfo.id
						// 	}
						// }).then((up_res) => {  
						// 	uni.hideLoading();
						// 	if (up_res.ret == 1000) {	 
						// 		uni.navigateTo({
						// 			url:'/package_shibie/dataList/dataList?type=1'
						// 		})
						// 	}
						// })  
					}
				})
				
			},
			
			checkCamera:async function(){
				// let system = getApp().globalData.systemInfo; 
				 
				uni.navigateTo({
					url:'/package_shibie/camera/camera?type='+this.type
				})
				 
			},
		}, 
		computed:{
			cy_update(){
				return this.$store.state.cy_update
			} 
			
		},
		watch:{
			cy_update(n,o){
				if(n!=o){
					this.list=[];
					this.gardenindex();
				}
			} 
		},
		components: { 
		}
	}
</script>

<style lang="less" scoped>
	.page,.body{ 
		position: relative; 	 
	}
	.body-bg{
		position: absolute;
		left:0;
		top:0;
		width: 100%; 
		image{
			width: 100%;
		}
	}
	.a-fadeinR{
		-webkit-animation:.2s ease-out backwards;
		-moz-animation:.2s ease-out backwards;
		-ms-animation:.2s ease-out backwards;
		animation:.2s ease-out backwards;
		-webkit-animation-name:fadeinR;
		-moz-animation-name:fadeinR;
		-ms-animation-name:fadeinR;
		animation-name:fadeinR
	}
	@keyframes fadeinR{
		0%{
			opacity:0;
			transform:translateX(30px)
		}
		100%{
			opacity:1;
			transform:translateX(0)
		}
	}
	.top{
		position: relative;
		z-index: 1000000;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx 0;  
		.tabs{
			display: flex;
			justify-content: space-between;
			position: relative;
			z-index: 1000000;
			.left{			
				position: relative; 
				z-index: 1000000;
				.picker-view{
					display: flex;
					align-items: center;
				}
				.text{
					font-size: 38rpx; 
				}
				.icon{
					width: 20rpx;
				}
				
			}		
		}
		.right{
			display: flex;
			margin-right: 150rpx;
			.msg,.add{
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 90rpx;
				width: 90rpx; 
				image{
					width: 60%;
				}
			}
			.msg{
				.d{
					position: absolute;
					right: 0;
					top: 0;
					width: 20rpx;
					height: 20rpx;
					background: #f00;
					border-radius: 50%;
				}
			}
			.add{
				.add-btns{
					position: absolute; 
					right: 60rpx;
					top: 40rpx;
					z-index: 100;
					width: 200rpx;
					padding: 20rpx 0 0;
					background: rgba(245, 247, 250, 1);
				}
				.btn{
					padding: 20rpx 0;
					margin-bottom: 10rpx;
					background: #fff;
					font-size: 28rpx;
					color: #606266;
					text-align: center;
				}
			}
		}
	}
	.cy-list{
		position: fixed;
		left: 30rpx; 
		z-index: 10000000;
		width: 340rpx; 
		background: #fff;
		border-radius: 15rpx;
		.btn{
			display: flex;
			justify-content: space-between;
			align-items: center; 
			padding: 30rpx 30rpx;
			background: #ECF8F8;
			color: #5CB8BA;
			font-size: 30rpx;
			&:first-child{
				border-top-left-radius: 15rpx;
				border-top-right-radius: 15rpx;
			}
		}
		.manage-btn{
			margin: 10rpx 30rpx;
			padding: 30rpx 0;
			border-top: 1rpx solid #E5E5E5;
			background: #fff;
			color: #2D2D2D;
		}
	}
	.area-tab{
		position: relative;
		z-index: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 50rpx 30rpx;
		.left{
			display: flex;
			align-items: flex-end;
			font-size: 36rpx;
			color: #999;
			.active{
				font-size: 46rpx; 
				color: #000;
			}
		}
		.right{
			width: 100rpx;
			image{
				width: 100%;
			}
		}
	}
	.mode-btn{
		position: relative;
		z-index: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 30rpx;
		image{
			width: 49%;
		}
	}
	.video-area{
		position: relative;
		z-index: 1;
		margin: 40rpx 30rpx;
		height: 400rpx;
		background: #ccc;
		border-radius: 10rpx;
	}
	.data-area{
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		margin: 40rpx 30rpx;
		.item,.item-row-1{
			position: relative;
			margin-bottom: 20rpx;
			padding: 20rpx 0 10rpx;
			background: #fff;
			border-radius: 15rpx;
			.spot{
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				background: #75FB91;
			}
			.icon{
				margin: 0 20rpx 30rpx;
				width:70rpx;
				height: 70rpx;
				background: #ccc;
			}
			.info{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 20rpx;
				.name{
					font-size: 28rpx;
				}
				.status-icon{
					width: 58rpx;
					image{
						width: 100%;
					}
				}
			}
		}
		.item{				
			width: 48%;  			
		}
		.item-row-1{
			width: 100%; 
			.line-bar{
				position: relative;
				height: 32rpx;
				margin-top: 20rpx;
				.line{ 
					margin: 0 30rpx;
					height: 16rpx;
					border-bottom:1rpx dotted #ddd;
				}
				.circle{
					position: absolute;
					top: 0;
					width: 32rpx;
					height: 32rpx;
					background: #f8f8f8;
					border-radius: 50%;
				}
				.left{
					left: -16rpx;
				}
				.right{
					right:-16rpx
				}
			}
			.item-detail-wrap{
				padding: 20rpx;
				background: #fff; 
				.status{
					margin-bottom: 20rpx;
					font-size: 56rpx;
					text-align: center;	
					color: #F2A947;
				}
				.time{
					text-align: center;
					font-size: 24rpx;
				}
				.attr-list{
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					margin-top: 50rpx;
					.sub-item{
						display: flex;
						align-items: center; 
						margin-top: 40rpx;
						image{
							width: 24rpx;
							margin-right: 10rpx;
						}
						text{
							font-size: 24rpx;
						}						
					}
				}
			}
		}
	}
</style>
